<template>
  <span class="edit-select-container">
    <el-link v-if="!isEdit && !tag" @click="isEdit = true" :underline="false">
      {{text}}
      <i v-if="!text" :class="iconClass || 'el-icon-edit'"></i>
      <i v-if="text && clearable" class="el-icon-circle-close" @click="clear" ></i>
    </el-link>
    <el-tag type="info" v-if="!isEdit && tag" @click="isEdit = true" size="mini" style="cursor: pointer;">
      {{text}}
      <i v-if="iconVisible" :class="iconClass || 'el-icon-edit'"></i>
      <i v-if="text && clearable" class="el-icon-circle-close" @click="clear" ></i>
    </el-tag>
    <el-form ref="form" :inline="true" :model="formData" v-if="isEdit" size="mini">
      <el-form-item prop="text">
        <el-select v-model="formData.value" placeholder="请选择" :disabled="loading">
          <el-option
            v-for="item in options"
            :key="item[prop.value]"
            :label="item[prop.label]"
            :value="item[prop.value]">
          </el-option>
        </el-select>
        <span class="text-btn-container">
          <i v-if="!loading" class="el-icon-check" @click="submit"></i>
          <i v-if="!loading" class="el-icon-close" @click="cancel"></i>
          <i v-if="loading"></i>
          <i v-if="loading" class="el-icon-loading"></i>
        </span>
      </el-form-item>
      <!-- <el-form-item>
        <el-button type="primary" @click="submit">{{$t('botton.save')}}</el-button>
        <el-button type="info" @click="cancel">{{$t('botton.cancel')}}</el-button>
      </el-form-item> -->
    </el-form>
  </span>
</template>
<script>
export default {
  props: ["value", "options", "prop", "editMethod", "iconClass", "clearable", "tag", "iconVisible"],
  data() {
    return {
      loading: false,
      isEdit: false,
      formData: {
        value: ""
      }
    };
  },
  computed: {
    text() {
      const option = this.options.find((option) => option[(this.prop).value] === this.formData.value);
      return option ? option[(this.prop).label] : "";
    }
  },
  watch: {
    value() {
      this.formData.value = this.value;
    }
  },
  mounted() {
    this.formData.value = this.value;
  },
  methods: {
    cancel() {
      this.isEdit = false;
    },
    submit() {
      if (this.editMethod) {
        this.loading = true;
        this.editMethod(this.formData.value).then(() => {
          this.$emit('change', this.formData.value);
          this.isEdit = false;
        }).finally(() => {
          this.loading = false
        })
      } else {
        this.$emit('change', this.formData.value);
        this.isEdit = false;
      }
    },
    clear() {
      this.formData.value = "";
      this.submit();
    }
  }
}
</script>
<style lang="scss" scoped>
.edit-select-container {
  ::v-deep.el-form-item {
    margin: 0px;
    margin-bottom: 5px;
  }

  ::v-deep.el-form-item__content {
    position: relative;
  }

  ::v-deep.el-input__inner {
    padding-right: 45px;
  }

  ::v-deep.el-input__suffix {
    display: none;
  }

  .text-btn-container {
    width: 45px;
    position: absolute;
    top: 0px;
    bottom: 0px;
    right: 0px;
    padding-left: 5px;
    padding-right: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .el-icon-check {
      color: var(--color-success);
      cursor: pointer;
    }

    .el-icon-close {
      color: var(--color-info);
      cursor: pointer;
    }
  }
}
</style>